<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xml:lang="en" lang="en">
    <head>
        <title>metaphorea.js demo</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <script src="../libs/javascript-xpath-latest-cmp.js" type="text/javascript"></script>
        <script src="../src/dbe.js" type="text/javascript"></script>
        <script src="../src/metaphorea.js" type="text/javascript"></script>

        <script src="jsunittest/jsunittest.js" type="text/javascript"></script>
        <link rel="stylesheet" href="jsunittest/unittest.css" type="text/css" />
    </head>
    <body>

        <div id="content">

            <div id="header">
                <p>tests :
                    <a href="dbe_test.html">dbe</a>
                    <a href="metaphorea_test.html">metaphorea</a>
                    <a href="metaphorea_scale_test.html">scaling</a>
                    <a href="metaphorea_interaction_test.html">interaction</a>
                    <a href="metaphorea_demo.html">demo</a>
                </p>
                <h1>metaphorea.js demo file</h1>
            </div>

            <!-- Log output (one per Runner, via {testLog: "testlog"} option)-->
            <div id="testlog"></div>

            <!-- Put sample/test html here -->
            <div id="sample">
                <div>
                    <table>
                        <tr>
                            <td>
                                <h3>data</h3>
                                <iframe src="data/city_measures.xml.html" width="320" height="220"></iframe>
                            </td>
                            <td>
                                <h3>SVG template 1</h3>
                                <iframe src="visuals/wordplot.svg" width="200" height="220"></iframe>
                            </td>
                            <td>
                                <h3>SVG template 2 + source</h3>
                                <iframe src="visuals/dotplot.svg" width="200" height="220"></iframe>
                                <iframe src="visuals/dotplot.svg.html" width="240" height="220"></iframe>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="targetViewsSpace">
                    <h2>Visualizations</h2>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            // <![CDATA[
            $metaphorea.setTarget("targetViewsSpace");

            $metaphorea.binding("bindings/sample_binding2.xml");
            $metaphorea.binding("bindings/sample_binding_10e1.xml");
            $metaphorea.binding("bindings/sample_binding3.xml");
            $metaphorea.binding("bindings/sample_binding4.xml");
            
            // ]]>
        </script>
    </body>
</html>